import React, { Component } from 'react'
import Header from '../../components/header/header'
import {Form,Input,Button,Toast} from "antd-mobile"
import "./login.less"
import { connect } from 'react-redux';
import { actions,getUser } from '../../store/modules/login';
import { bindActionCreators } from 'redux';

class login extends Component {
  render() {
    let {user,login:{reqLogin,changeUser}} = this.props
    console.log(login);
    return (
      <div className='login'>
        <Header text="登录" register></Header>
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号' onChange={(e) => changeUser("phone",e)} clearable />
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' onChange={(e) => changeUser("password",e)} clearable type='password' />
          </Form.Item>
          <Button block color="primary" size="large" onClick={()=>reqLogin(this.props.history.push)}>
            登录
          </Button>
        </Form>
      </div>
    )
  }
}

const mapStateToProps = (state)=>({
    user:getUser(state)
})
const mapDispatchToProps=(dispatch)=>{
    return{
        login: bindActionCreators(actions, dispatch),
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(login)